<li class="message-item">
    <div class="avatar">
        <img src="https://moyuu.gitee.io/image/avatar.jpeg" alt="" width="65px">
    </div>
    <div class="text message-area ">
        <div class="user-message">
            <span class="username">Janmas&nbsp;14:56</span>
        </div>
        <div class="message-content">
            <p>啊大苏打大苏打大撒旦啊大苏打大苏打大撒旦啊大</p>
        </div>
    </div>
</li>

<!--图片类型-->
<li class="message-item self-message">
    <div class="avatar">
        <img src="https://moyuu.gitee.io/image/avatar.jpeg" alt="" width="65px">
    </div>
    <div class="text message-area">
        <div class="user-message">
            <span class="username">Janmas&nbsp; 14:56</span>
        </div>
        <div class="message-content">
            <img src="http://he.qxiangkj.cn/uploads/20220129/88fde065a6e3b1bca16afa3164b7516f.jpg" alt="">
        </div>
    </div>
</li>

<!--图文类型-->
<li class="message-item self-message">
    <div class="avatar">
        <img src="https://moyuu.gitee.io/image/avatar.jpeg" alt="" width="65px">
    </div>
    <div class="text message-area">
        <div class="user-message">
            <span class="username">Janmas&nbsp; 14:56</span>
        </div>
        <div class="message-content image">
            <img src="http://he.qxiangkj.cn/uploads/20220129/88fde065a6e3b1bca16afa3164b7516f.jpg" alt="">
            <p>asdasdasdasdasdasdasdasdasdasdasdasd</p>
        </div>
    </div>
</li>

<!--文件类型-->
<li class="message-item self-message">
    <div class="avatar">
        <img src="https://moyuu.gitee.io/image/avatar.jpeg" alt="" width="65px">
    </div>
    <div class="text message-area ">
        <div class="user-message">
            <span class="username">Janmas&nbsp; 14:56</span>
        </div>
        <div class="message-content">
            <a href="http://he.qxiangkj.cn/uploads/20220129/88fde065a6e3b1bca16afa3164b7516f.jpg" target="_blank">
                <div class="filearea">
                    <div class="file">
                        <span class='filename'>123123123321.html</span>
                        <span class='filesize'>1K</span>
                    </div>
                    <div class="file-icon">
                        <img src="https://moyuu.gitee.io/image/avatar.jpeg" alt="" width="50px">
                    </div>
                </div>
            </a>
        </div>
    </div>
</li>

<!--语音类型-->
<li class="message-item">
    <div class="avatar">
        <img src="https://moyuu.gitee.io/image/avatar.jpeg" alt="" width="65px">
    </div>
    <div class="message-area">
        <div class="user-message">
            <span class="username">Janmas&nbsp; 14:56</span>
        </div>
        <div class="message-content">
        </div>
    </div>
</li>
